<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="zh-CN">
	  <head>
	    <meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	    <title>Bootstrap 101 Template</title>
		
	    <!-- Bootstrap -->
	    <link href="${pageContext.request.contextPath }/css/bootstrap.min.css" rel="stylesheet">
		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="${pageContext.request.contextPath }/js/jquery-1.11.0.min.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
		<link href="${pageContext.request.contextPath }/css/vipPage.css" rel="stylesheet"/>
		<script type="text/javascript" src="${pageContext.request.contextPath }/js/Demo1.js"></script> 
		<script>
			$(function () {
				$("#username").blur(function () {
					$.post("${pageContext.request.contextPath}/updateServlet","username="+this.value,function(data) {
						$("#usernamespan").html(data)
					})
				})
			})
		</script>
	  </head>
	<body>
		<div class="container">
			<div class="row" id="a">
				<div class="col-lg-1"></div>
				<div class="col-lg-3">
					<img src="${pageContext.request.contextPath }/images/goods/logo.png"/>
				</div>
				<div class="col-lg-5"></div>
				<div class="col-lg-3">
					<div class="a_1">
						<a href="${pageContext.request.contextPath }/vipServlet">个人中心</a> | <a href="${pageContext.request.contextPath }/showShopService">我的订单</a><br/>
						[ <a href="${pageContext.request.contextPath }/page/login1.jsp">登录</a> ] | [ <a href="${pageContext.request.contextPath }/page/login2.jsp">免费注册</a> ]
					</div>
				</div>
			</div>
			<div class="row" id="b">
				<div class="col-lg-1"></div>
				<div class="col-lg-4">
					<ul class="nav navbar-nav">
						<li class="active"><a href="${pageContext.request.contextPath }/index.jsp">首页<span class="sr-only">(current)</span></a></li>
							<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">书库<span class="caret"></span></a>
							<ul class="dropdown-menu">
								<li><a href="${pageContext.request.contextPath }/findPageServlet?currentPage=1&id=1">IT技术</a></li>
					            <li><a href="${pageContext.request.contextPath }/findPageServlet?currentPage=1&id=2">小说文学</a></li>
					            <li><a href="${pageContext.request.contextPath }/findPageServlet?currentPage=1&id=3">历史传记</a></li>
					            <li><a href="${pageContext.request.contextPath }/findPageServlet?currentPage=1&id=4">生活</a></li>
					            <li><a href="${pageContext.request.contextPath }/findPageServlet?currentPage=1&id=5">经营管理</a></li>
					            <li><a href="${pageContext.request.contextPath }/findPageServlet?currentPage=1&id=6">SF轻小说</a></li>
					          </ul>
						</li>
						<li><a href="#">排行榜</a></li>
						<li><a href="#">App下载</a></li>
					</ul>
				</div>
				<div class="col-lg-4">
					<form class="navbar-form navbar-left">
					    <div class="form-group">
							<input type="text" class="form-control" placeholder="输入作品名/作者名">
					    </div>
					    <button type="submit" class="glyphicon glyphicon-hand-right btn btn-info">&nbsp;搜索</button>
					</form>
				</div>
				<div class="col-lg-3">
					<div class="b_1">
					<div class="btn-group">
					  <button type="button" class="btn btn-default btn-sm">购物车0件</button>
					  <button type="button" class="btn btn-info dropdown-toggle btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					    <span class="caret"></span>
					    <span class="sr-only">Toggle Dropdown</span>
					  </button>
						<a class="btn btn-warning btn-sm" href="#" role="button">结算</a>
					  <ul class="dropdown-menu">
					    <li><a href="#">商品1</a></li>
					    <li><a href="#">商品2</a></li>
					    <li><a href="#">商品3</a></li>
					    <li><a href="#">商品4</a></li>
					  </ul>
					</div>
					</div>
				</div>
			</div>
			<div class="row" id="c">
				<div class="col-lg-1"></div>
				<div class="col-lg-2 text-center" style="border: 1px solid deeppink;"><font style="font-size: 30px;font-family: 幼圆;">会员中心</font></div>
				<div class="col-lg-8"></div>
				<div class="col-lg-1"></div>
			</div>
			<div class="row" id="d">
				<div class="col-lg-1"></div>
				<div class="col-lg-10" style="border: 1px solid deeppink;">
					<div class="bs-example bs-example-tabs" data-example-id="togglable-tabs">
					    <ul id="myTabs" class="nav nav-tabs" role="tablist">
					        <li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">我的订单</a>
					        <li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">地址管理</a>
					        <li role="presentation" class="dropdown">
					        <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">个人设置<span class="caret"></span></a>
							<ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
								<li><a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">修改头像</a>
								<li><a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">修改密码</a>
							</ul>
					    </ul>
					    <div id="myTabContent" class="tab-content">
					        <div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledby="home-tab">
								<div class="d_1">
									<table width="900px" align="center" style="border-collapse:separate; border-spacing:0px 10px;">
										<tr bgcolor="yellow">
											<td width="20%" align="center">订单编号</td>
											<td width="20%" align="center">下单日期</td>
											<td width="15%" align="center">收货人</td>
											<td width="15%" align="center">支付方式</td>
											<td width="15%" align="center">总金额</td>
											<td width="15%" align="center">订单状态</td>
										</tr>
										<c:forEach items="${carts }" var="carts">
											<tr>
											<td width="20%" align="center"><font style="color: deeppink;">${carts.goodsno }</font></td>
											<td width="20%" align="center">202-8-27</td>
											<td width="15%" align="center">${carts.username }</td>
											<td width="15%" align="center">支付宝</td>
											<td width="15%" align="center">￥：${carts.price }</td>
											<td width="15%" align="center">已支付</td>
										</tr>
										</c:forEach>
									</table>
									<div class="d_2">
										<input class="btn btn-default" type="button" value="上一页">
										<input class="btn btn-default" type="submit" value="1">
										<input class="btn btn-default" type="button" value="下一页">
										<input class="btn btn-default" type="submit" value="当前第1页/共1页">
									</div>
								</div>
					        </div>

					        <div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledby="profile-tab">
								<div style="border: 1px solid deeppink;">
					            <table width="900px" align="center" style="border-collapse:separate; border-spacing:0px 10px;">
					            	<tr bgcolor="yellow">
					            		<td width="10%" align="center">收货人</td>
					            		<td width="20%" align="center">所在地区</td>
					            		<td width="20%" align="center">详细地址</td>
					            		<td width="15%" align="center">手机号</td>
					            		<td width="10%" align="center">操作</td>
					            		<td width="10%" align="center"></td>
					            	</tr>
					            	<c:forEach items="${carts }" var="carts" end="0">
					            	<tr>
					            		<td width="10%" align="center">${carts.username }</td>
					            		<td width="20%" align="center">${carts.province} ${carts.city} ${carts.area}</td>
					            		<td width="20%" align="center">${carts.address }</td>
					            		<td width="15%" align="center">${carts.telphone }</td>
					            		<td width="10%" align="center">
											<a href="#">修改</a>&nbsp;|&nbsp;
											<a href="#">删除</a>&nbsp;|
										</td>
					            		<td width="10%" align="center">
											<input class="btn btn-default btn-sm" type="button" value="设为默认地址">
										</td>
					            	</tr>
					            	</c:forEach>
					            </table>
								</div>
								<div class="d_4">
									<font style="font-size: 17px;">&nbsp;&nbsp;&nbsp;新增地址</font>
								</div>
								<div class="d_3">
									<div class="d_3_1">
										<form action="${pageContext.request.contextPath}/AddAddresServlet" method="post">
										<div class="d_1_div">&nbsp;&nbsp;&nbsp;收货人：<input type="text" placeholder="收件人姓名" name="username"/></div>
										<div class="d_3_div">手机号码：<input type="text" placeholder="收件人手机号码" name="phone"/></div>
										<div class="d_3_div">
											地址设置：
											<select id="cmbProvince" name="cmbProvince"></select>
											<select id="cmbCity" name="cmbCity"></select>  
											<select id="cmbArea" name="cmbArea"></select>  
											<input type="text" placeholder="请写详细地址" οnblur="if(this.value=''){this.value='详细地址'}" οnfοcus="if(this.value='详细地址'){this.value='';this.style.color='#ff0000'}" name="addres"/>
											<script type="text/javascript">  
											addressInit('cmbProvince', 'cmbCity', 'cmbArea');  
											</script>
										</div>
										<div class="d_3_div">
											是否设为默认地址：<input type="radio" name="rideo"/> 是
															<input type="radio" name="rideo"/> 否
										</div>
										<div class="bt">
											<input class="btn btn-default" type="submit" value="添加">
										</div>
										</form>
									</div>
								</div>
					        </div>


					        <div role="tabpanel" class="tab-pane fade" id="dropdown1" aria-labelledby="dropdown1-tab">
								<div class="d_6">
									<div align="center">尊敬的 <font style="color: deeppink;">蕾米莉亚</font> 欢迎你登录蜗牛图书商城</div>
									<div class="d_6_1">
										<img src="${pageContext.request.contextPath }/images/goods/dbf05f4c-cacb-4b6b-b088-f3fed9da7119.jpg" class="img-thumbnail">
									</div>
									<div align="center">
										<div style="width:130px;text-align:center;background:#F60;color:#FFF;margin:5px 0;cursor:pointer">上传头像</div>
									</div>
								</div>
					        </div>
					        <div role="tabpanel" class="tab-pane fade" id="dropdown2" aria-labelledby="dropdown2-tab">
								<div class="d_5">
									<form action="${pageContext.request.contextPath }/checkedServlet" method="post">
										<div class="d_5_1">&nbsp;&nbsp;&nbsp;原密码：<input type="text" size="15px" name="username" id="username" placeholder="输入原密码"/><span id="usernamespan"></span></div>
										<div class="d_5_1">&nbsp;&nbsp;&nbsp;新密码：<input type="password" size="15px" name="newpassword" placeholder="输入新的密码"/></div>
										<div class="d_5_2">确认密码：<input type="password" size="15px" name="password" placeholder="确认新密码" id="password"/><span></span></div>
										<div class="d_5_3">
											<input class="btn btn-default" type="submit" value="确认修改" id="button" onclick="aaa()">
										</div>
									</form>
								</div>
					        </div>
					    </div>
					</div>
				</div>
				<div class="col-lg-1"></div>
			</div>
			
			<div class="row" id="e">
				<div class="container">
					<div class="row">
						<hr/>
					</div>
					<div class="row">
						<div class="col-lg-1"></div>
						<div class="col-lg-2 text-center">购物指南<hr style="border: 2px solid pink; width: 170px; background-color: pink;"></div>
						<div class="col-lg-2 text-center">支付帮助<hr style="border: 2px solid pink; width: 170px; background-color: pink;"></div>
						<div class="col-lg-2 text-center">配送帮助<hr style="border: 2px solid pink; width: 170px; background-color: pink;"></div>
						<div class="col-lg-2 text-center">售后服务<hr style="border: 2px solid pink; width: 170px; background-color: pink;"></div>
						<div class="col-lg-2 text-center">帮助信息<hr style="border: 2px solid pink; width: 170px; background-color: pink;"></div>
						<div class="col-lg-1"></div>
					</div>
					<div class="row">
						<div class="col-lg-1"></div>
						<div class="col-lg-2 text-center">＊订单状态</div>
						<div class="col-lg-2 text-center">＊支付帮助</div>
						<div class="col-lg-2 text-center">＊EMS/邮政普包</div>
						<div class="col-lg-2 text-center">＊售后服务</div>
						<div class="col-lg-2 text-center">＊友情链接</div>
						<div class="col-lg-1"></div>
					</div>
					<div class="row">
						<div class="col-lg-1"></div>
						<div class="col-lg-2 text-center">＊购物流程</div>
						<div class="col-lg-2 text-center">＊在线支付</div>
						<div class="col-lg-2 text-center">＊商品验货与签收</div>
						<div class="col-lg-2 text-center">＊发票制度</div>
						<div class="col-lg-2 text-center">＊联系客服</div>
						<div class="col-lg-1"></div>
					</div>
					<div class="row">
						<div class="col-lg-1"></div>
						<div class="col-lg-2 text-center"></div>
						<div class="col-lg-2 text-center">＊货到付款</div>
						<div class="col-lg-2 text-center">＊配送范围及运费</div>
						<div class="col-lg-2 text-center">＊退货说明</div>
						<div class="col-lg-2 text-center">＊找回密码</div>
						<div class="col-lg-1"></div>
					</div>
					<div class="row">
						<div class="col-lg-1"></div>
						<div class="col-lg-2 text-center"></div>
						<div class="col-lg-2 text-center"></div>
						<div class="col-lg-2 text-center"></div>
						<div class="col-lg-2 text-center">＊退货说明</div>
						<div class="col-lg-2 text-center">＊关于我们</div>
						<div class="col-lg-1"></div>
					</div>
				</div>
			</div>
			<div class="row" id="g">
				<div class="col-lg-2"></div>
				<div class="col-lg-8 text-center" style="height:35px;">
					<div id="g_1">
						<a href="img.html">免责声明</a> &nbsp;|&nbsp; <a href="img.html">版权隐私</a> &nbsp;|&nbsp; <a href="img.html">联系方式</a> &nbsp;| &nbsp; <a href="img.html">友情链接</a> &nbsp;| &nbsp;
						<a href="img.html">广告投放</a> &nbsp;|&nbsp; <a href="img.html">粤ICP备10062407号</a> &nbsp;|&nbsp; <a href="img.html">免责声明</a>
					</div>
				</div>
				<div class="col-lg-2"></div>
			</div>
			<div class="row" id="g">
				<div class="col-lg-2"></div>
				<div class="col-lg-8 text-center">
					粤文网[2012]0726-109号[c]2005 - 2014 SFACG.COM ALL Rights Reserved
				</div>
				<div class="col-lg-2"></div>
			</div>
			
			
		</div>
	</body>
</html>
